<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				list-style: none
			}

			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 1400px;
				height: 700px;
				margin: 50px auto;
				border: 1px solid red;
				overflow: hidden;
			}

			div li {
				width: 280px;
				height: 100%;
				float: left;
			}

			div ul {
				width: 2000px;
				height: 100%;
			}

			img {
				width: 1200px;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li><img src="1.jpg"></li>
				<li><img src="2.jpg"></li>
				<li><img src="3.jpg"></li>
				<li><img src="4.jpg"></li>
				<li><img src="5.jpg"></li>
			</ul>
		</div>
		<script src="../public0.1.1.js"></script>
		<script type="text/javascript">
			var box = document.getElementsByTagName("ul")[0]; //ul
			var liS = box.children; //所有li的集合		
			var imgs = document.getElementsByTagName("img")
			console.log(imgs)
			for (var i = 0; i < liS.length; i++) {
				// 2 鼠标移入某个li
				liS[i].onmouseover = function() {
					// 所有li的宽度缓动到100j++
					for (var j = 0; j < liS.length; j++) {
						move(liS[j], 'width', 100)
					}
					// 我自己的宽度缓动到800
					move(this, 'width', 1000)
					
				}

			}
			box.onmouseout = function() {
				for (var j = 0; j < liS.length; j++) {
					move(liS[j], 'width', 280)
				}
			}
		</script>
	</body>
</html>
